<template>
  <view class="home page-container">
    <!-- 顶部导航栏 -->
    <view class="home-header">
      <view class="store-info" @click="showActionSheet">
        <text class="store-text">{{ selectBranch }}</text>
      </view>
      <view class="notice">
        <text>本店须知</text>
      </view>
    </view>

    <!-- 主背景区域 -->
    <view class="home-logo">
      <image src="/static/logo.png"></image>
    </view>

    <!-- 欢迎区域 -->
    <view class="home-main">
      <view v-if="isNeedLogin" class="login-card bg-2a">
        <view class="login-text">
          <view>欢迎来到卡哇Kawai</view>
          <view>更好的会员服务，登录后即可体验</view>
        </view>

        <!-- #ifdef WEB -->
        <button
          class="login-btn"
          @click="() => {
            uni.navigateTo({ url: '/pages/Login/index' });
          }"
        >
          登录
        </button>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->
        <button
          class="login-btn"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          登录
        </button>
        <!-- #endif -->
      </view>

      <view class="action-card bg-2a">
        <view class="order-card" @click="handleOrder">
          <view class="action-icon-container">
            <view class="beer-icon">🍺</view>
          </view>
          <view class="action-text">
            <view class="action-title">点餐</view>
            <view class="action-subtitle">Order</view>
          </view>
        </view>

        <view class="reservation-card" @click="handleReservation">
          <view class="action-icon-container">
            <view class="card-icon">🎫</view>
          </view>
          <view class="action-text">
            <view class="action-title">预约</view>
            <view class="action-subtitle">Reservation</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 主要功能按钮 -->

    <!-- 门店选择弹窗 -->
    <nut-action-sheet
      description="切换门店"
      v-model:visible="isShow"
      :menu-items="branches"
      @choose="onSelect"
    ></nut-action-sheet>
  </view>
</template>

<script setup>
import { ref, inject } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";

import { ACCESS_TOKEN_KEY, USER_DATA_INJECTION_KEY } from "../../constants";
import { isTokenValid } from "../../utils/storage";
import { getShopList } from "../../api";

const branches = ref([]);
const selectBranch = ref("请选择门店");

const isShow = ref(false);
const showActionSheet = () => {
  isShow.value = true;
};

const onSelect = (itemParams) => {
  selectBranch.value = itemParams.name;
  isShow.value = false;
};

// 用户信息
const { userData, updateUserData } = inject(USER_DATA_INJECTION_KEY);

// 登录流程
const getPhoneNumber = (event) => {
  uni.request({
    url: "https://express-kawai-bar-193965-4-1310892133.sh.run.tcloudbase.com/api/create_user",
    method: "POST",
    data: {
      code: event.detail.code, // 用于获取用户手机号的动态令牌
      openid: userData.value.openid,
    },
    success: ({ data }) => {
      console.log("getPhoneNumber", data);
      // isExist.value = !!data.create_status;
      updateUserData({
        ...userData.value,
        isExist: !!data.create_status,
      });
    },
  });
};

const handleOrder = () => {
};

const handleReservation = () => {
};




onShow(async () => {
  // // #ifdef MP-WEIXIN
  // // 获取用户设置【H5不成功】
  // uni.getSetting({
  //   success: ({ authSetting }) => {
  //     // 是否授权获取地理位置
  //     if (authSetting["scope.userLocation"]) {
  //       uni.getLocation({
  //         success: (res) => {
  //           console.log("用户地理位置", res);
  //         },
  //       });
  //     } else {
  //       uni.authorize({
  //         scope: "scope.userLocation",
  //         success: () => {
  //           uni.getLocation({
  //             success: (res) => {
  //               console.log("用户地理位置", res);
  //             },
  //           });
  //         },
  //       });
  //     }
  //   },
  // });
  // // #endif

  const res = await getShopList();
  branches.value = res.data;
});

const isNeedLogin = ref(true);
onShow(() => {
  isNeedLogin.value = !isTokenValid()
})
</script>

<style lang="scss">
.home {
  /* 顶部导航栏 */
  .home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90vw;
    padding: 30rpx 40rpx;

    .store-info {
      .store-text {
        color: #ffc300;
        font-size: 32rpx;
        font-weight: 500;
      }
    }

    .notice {
      padding: 16rpx 32rpx;
      border-radius: 50rpx;

      background-color: #ffc300;
      color: #121212;
      font-size: 28rpx;
      font-weight: 500;
    }
  }

  /* 背景区域 */
  .home-logo {
    position: relative;

    display: flex;
    flex: 0.5;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* 主区域 */
  .home-main {
    display: flex;
    flex-direction: column;

    .login-card {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 85vw;
      height: 150rpx;
      border-radius: 30rpx;
      margin-bottom: 50rpx;

      .login-text {
        margin-right: 20px;
        color: #ffffff;
        font-size: 26rpx;
      }

      .login-btn {
        padding: 10rpx 40rpx;
        border: 2rpx solid #ffc300;
        border-radius: 20rpx;
        margin: 0;
        background-color: transparent;
        color: #ffc300;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .action-card {
      display: flex;
      align-items: center;
      justify-content: space-around;

      width: 85vw;
      height: 350rpx;
      border-radius: 30rpx;
      background-color: #2a2a2a;

      .action-icon-container {
        margin-bottom: 20rpx;

        .beer-icon,
        .card-icon {
          font-size: 100rpx;
        }
      }

      .action-text {
        display: flex;
        flex-direction: column;
        align-items: center;

        .action-title {
          color: #ffffff;
          font-size: 36rpx;
          font-weight: 500;
          margin-bottom: 10rpx;
        }

        .action-subtitle {
          color: #ffc300;
          font-size: 24rpx;
        }
      }
    }

    .bg-2a {
      background-color: #2a2a2a;
    }
  }
}

/* TDesign组件样式覆盖 */
// .t-button::after {
// 	border: none !important;
// }

// .t-action-sheet__description {
// 	--td-action-sheet-description-color: #ffffff;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// 	height: 100rpx;
// 	background-color: #6E4400;
// }

// .t-action-sheet__list {
// 	background-color: #3B3B3B;
// }

// .t-action-sheet__item {
// 	--td-action-sheet-item-color: #ffffff;
// }
</style>
